import React, { useState } from 'react';
import { Card, Descriptions, Tag, Divider, Button, Space, Breadcrumb, Modal, Form, Input, message } from 'antd';
import { HomeOutlined } from '@ant-design/icons';
import { Link, useParams, useNavigate } from 'react-router-dom';
import MainLayout from '../../components/MainLayout';
import styles from './FilingDetail.module.less';

const { TextArea } = Input;

interface FilingData {
  id: string;
  projectName: string;
  projectCode: string;
  status: 'completed';
  startTime: string;
  endTime: string;
  manager: string;
  description: string;
  filingStatus?: 'filed';
  filingTime?: string;
}

const FilingDetail: React.FC = () => {
  const { id } = useParams();
  const navigate = useNavigate();
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [form] = Form.useForm();

  const handleSubmit = async (values: any) => {
    try {
      // TODO: 调用API提交备案
      message.success('提交成功！');
      setIsModalVisible(false);
      navigate('/summary/filing');
    } catch (error) {
      message.error('提交失败，请重试！');
    }
  };

  // 模拟数据
  const filing: FilingData = {
    id: id || '',
    projectName: '示范区档案管理项目',
    projectCode: 'PRJ001',
    status: 'completed',
    startTime: '2024-03-01',
    endTime: '2024-03-20',
    manager: '张三',
    description: '项目整体验收情况良好，所有问题已整改完成...',
    filingStatus: 'filed',
    filingTime: '2024-03-25 14:30'
  };

  return (
    <MainLayout>
      <div className={styles.breadcrumb}>
        <Breadcrumb items={[
          {
            title: <Link to="/home"><HomeOutlined /> 首页</Link>,
          },
          {
            title: <Link to="/summary/filing">结果备案</Link>,
          },
          {
            title: '备案详情',
          }
        ]} />
      </div>

      <Card className={styles.detailCard}>
        <div className={styles.header}>
          <h2>{filing.projectName}</h2>
          <Space>
            <Tag color="success">验收完成</Tag>
            {filing.filingStatus === 'filed' && (
              <Tag color="success">已备案</Tag>
            )}
          </Space>
        </div>

        <Divider />

        <Descriptions column={2}>
          <Descriptions.Item label="项目编号">{filing.projectCode}</Descriptions.Item>
          <Descriptions.Item label="项目负责人">{filing.manager}</Descriptions.Item>
          <Descriptions.Item label="开始时间">{filing.startTime}</Descriptions.Item>
          <Descriptions.Item label="完成时间">{filing.endTime}</Descriptions.Item>
          {filing.filingStatus === 'filed' && (
            <Descriptions.Item label="备案时间">{filing.filingTime}</Descriptions.Item>
          )}
        </Descriptions>

        <Divider orientation="left">验收总结</Divider>
        <div className={styles.description}>{filing.description}</div>

        <Divider />

        <div className={styles.footer}>
          <Space>
            <Button onClick={() => navigate(-1)}>返回</Button>
            {!filing.filingStatus && (
              <Button type="primary" onClick={() => setIsModalVisible(true)}>
                提交备案
              </Button>
            )}
          </Space>
        </div>
      </Card>

      <Modal
        title="提交备案"
        open={isModalVisible}
        onCancel={() => setIsModalVisible(false)}
        footer={null}
      >
        <Form
          form={form}
          layout="vertical"
          onFinish={handleSubmit}
        >
          <Form.Item
            label="备案说明"
            name="filingNote"
            rules={[{ required: true, message: '请输入备案说明' }]}
          >
            <TextArea rows={4} placeholder="请输入备案说明..." />
          </Form.Item>

          <Form.Item className={styles.modalFooter}>
            <Space>
              <Button onClick={() => setIsModalVisible(false)}>取消</Button>
              <Button type="primary" htmlType="submit">提交</Button>
            </Space>
          </Form.Item>
        </Form>
      </Modal>
    </MainLayout>
  );
};

export default FilingDetail; 